<template>
	<view>
		
			<top-bar fixed="relative"></top-bar>
		
		<view class="group-goods" v-for="(item,index) in goods" :key="index">
			<view class="group-img">
				<image :src="item.coverPhoto || noPic"></image>
			</view>
			<view class="group-title">
				<text class="label">{{item.userCount}}人团</text>
				<text class="value">{{item.prodName}}</text>
			</view>
			<view class="group-desc">
				<text>{{item.prodDesc}}</text>
			</view>
			<view class="flex justify-between group-button">
				<view>
					<text  class="group-price"><text class="unit">团购价￥</text>{{item.groupPrice}}</text>
					<text class="normal-price">原价￥{{item.price}}</text>
					<!-- <text class="buyer-count">(3人团)</text> -->
				</view>
				<view>
					<button class="cu-btn round bg-red" @click="_toGroupGoods(item)">去拼团</button>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import topBar from "@/components/top-bar/top-bar.vue";
	import {queryGroupGoods} from '../../api/goods/goodsApi.js';
	import conf from '@/conf/config.js';
	export default {
		components: {
			topBar
		},
		data() {
			return {
				shopId:'',
				goods:[],
				noPic:conf.commonBaseUrl+'h5/static/noPic.png'
			}
		},
		async onLoad(options) {
			await this.vc.onLoad(options).then(_suc=>{},_err=>{});
			this.shopId = options.shopId;
			this._loadGoods()
		},
		methods: {
			_loadGoods:function(){
				let _that = this;
				queryGroupGoods({
					page:1,
					row:20,
					shopId:this.shopId
				}).then(_data=>{
					_that.goods = _data
				})
			},
			_toGroupGoods:function(_product){
				uni.navigateTo({
					url:'/pages/goods/groupGoods?productId='+_product.productId+"&groupId="+_product.groupId+"&shopId="+_product.shopId
				})
			}
			
		}
	}
</script>

<style lang="scss">
	
	.group-goods{
		margin: 20rpx;
		border-radius: 20rpx;
		background-color: #FFF;
		.group-img{
			width: 100%;
			image{
				height: 600rpx;
				width: 100%;
				border-radius: 20upx 20upx 0upx 0upx;
			}
		}
		.group-title{
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			margin-top: 25rpx;
			.label {
				display: flex;
				align-items: center;
				height: 38rpx;
				color: #FFF;
				font-size: 24rpx;
				padding: 0 12rpx;
				margin-right: 12rpx;
				border-radius: 8rpx;
				background: #BF8200;
			}
		}
		.group-desc{
			font-size: 24rpx;
			padding: 0 30rpx;
			margin-top: 20rpx;
		}
		.group-button{
			padding: 15rpx 30rpx 25rpx 30rpx;
			.group-price{
				color: #e1212b;
				font-size: 36rpx;
				.unit {
					font-size: 24rpx;
				}
			}
			.normal-price{
				color: #909399;
				font-size: 24rpx;
				text-decoration: line-through;
				margin-left:20rpx;
			}
			.buyer-count{
				margin-left:10upx;
				font-size: 24rpx;
				color: #777;
			}
		}
		
	}
	
	

</style>
